<template>
     <j-form-container :disabled="formDisabled">
       <!-- 主表单区域 -->
       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
         <a-row>
          <a-col :xl="5" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="应收" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receFee">
              <span class="underNoBorderLine">{{ model.receFee }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :xl="3" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="实缴" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realFee">
                 <span class="underNoBorderLine">{{ model.realFee }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :xl="1" :lg="2" :md="2" :sm="24">

          </a-col>
          <a-col :xl="4" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="收费方式：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="feeTollWay">
              <j-dict-select-tag type="list" v-model="model.feeTollWay" @change="feeItemChanges"  class="underListWay" dictCode="fee_toll_way"  />
            </a-form-model-item>
          </a-col>
          <a-col :xl="4" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="整收方式：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="feeWholeWay">
              <j-dict-select-tag type="list" v-model="model.feeWholeWay" @change="feeItemChanges" class="underListWay" dictCode="fee_whole_way"  />
            </a-form-model-item>
          </a-col>
          <a-col :xl="4" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="支付方式：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="feePayWay">
              <j-dict-select-tag type="list" v-model="model.feePayWay" @change="feeItemChanges" class="underListWay" dictCode="fee_pay_way"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="5" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="付款" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payFee">
              <a-input v-model="model.payFee" @blur="feeItemChanges" @keyup.enter.native="feeItemChanges" class="underRedLine" />
            </a-form-model-item>
          </a-col>
          <a-col :xl="3" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="找补" :labelCol="labelCol" :wrapperCol="wrapperCol" >
               <span class="underNoBorderLine">{{ model.zeroFee }}</span>
            </a-form-model-item>
          </a-col>
           <a-col :xl="1" :lg="2" :md="2" :sm="24">

          </a-col>
          <a-col :xl="4" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="票据类型：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billTypeId">
              <j-dict-select-tag type="list" v-model="model.billTypeId"  class="underListWay" dictCode="fee_bill_type"  ></j-dict-select-tag>
            </a-form-model-item>
          </a-col>
           <a-col :xl="4" :lg="2" :md="2" :sm="24">
            <a-form-model-item label="打印方式：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="feePrintWay">
               <j-dict-select-tag type="list" v-model="model.feePrintWay" defaultValue="01"  class="underListWay"  dictCode="fee_print_way"  />
            </a-form-model-item>
          </a-col>
          <a-col :xl="4" :lg="2" :md="2" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleFeeCharge" icon="pay-circle">收费</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
     </j-form-container>
</template>

<script>

  import { FormTypes,getRefPromise,VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
  import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'ChgUniteFeesForm',
    mixins: [JEditableTableModelMixin],
    components: {
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        model:{
          receFee: 0,
          realFee: 0,
          feeWholeWay: '01',
          feeTollWay: '02',
          billTypeId: '01',
          feePrintWay: '04',
          feePayWay: '2',
          zeroFee: 0,
          payFee: null
        },
        validatorRules: {
          //  cusId: [
          //     { required: true, message: '请输入用户号!'},
          //  ],
          //  cusName: [
          //     { required: true, message: '请输入用户名!'},
          //  ],

        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        refKeys: ['chgSubArrear', ],
        tableKeys:['chgSubArrear', ],
        activeKey: 'chgSubArrear',

        url: {
          add: "/chg/chgArrears/add",
          edit: "/chg/chgArrears/edit",
          chgSubArrear: {
            list: '/chg/chgArrears/queryChgSubArrearByMainId'
          },
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    },
    methods: {
     addBefore(){

      },
      getFeeModel(){
        return this.model;
      },
      setFeeModelMoney(arrMoney){
        this.model.receFee=arrMoney;
        this.$emit('feeChanges');
      },
      setFeeModel(realMode){
        if(realMode){
          this.model=realMode;
        }else{
          let m={
            receFee: 0,
            realFee: 0,
            feeWholeWay: '01',
            feeTollWay: '02',
            billTypeId: '01',
            feePrintWay: '04',
            feePayWay: '2',
            zeroFee: 0,
            payFee: null
          }
          this.model=m;
        }
      },
      feeItemChanges(){
         this.$emit('feeChanges');
      },
      handleFeeCharge(){
        this.$emit('handleFeeCharge');
      },

      validateError(msg){
        this.$message.error(msg)
      }
    }
  }
</script>

<style scoped>

 .underRedLine{
    width: 100%;
    border-radius: 0px;
    border-top: solid 0px #fff;
    border-left: solid 0px #fff;
    border-right: solid 0px #fff;
    border-bottom: solid 1px #fc0606;
    color: #fc0606;
    font-size: 26px;
  }
  .underNoBorderLine{
    width: 100%;
    color: #fc0606;
    padding-left: 10px;
    font-size: 26px;
  }
  .underListWay{
    width: 120px;
    margin-left: 10px;
  }

</style>